<!--
 * @Autor: Kadia
 * @Date: 2021-07-02 18:06:52
 * @LastEditors: Kadia
 * @Connect: nefukadia@foxmail.com
 * @LastEditTime: 2021-07-02 18:30:58
-->
<template>
    <div v-loading="loading">
        <div v-for="item in order" :key="item.order">
            <div style="height:20px;"></div>
            <el-card style="width:50%;margin:0 auto;" class="box-card">
                <div slot="header" class="clearfix">
                    <div style="color:#969799" v-if="item.method==0">
                        <div v-text="item.address">
                        </div>
                        <div v-text="item.name">
                        </div>
                        <div v-text="item.tel">
                        </div>
                    </div>
                    <div style="color:#969799" v-else>
                        自取
                    </div>
                </div>
                <el-steps :active="3" finish-status="success" style="margin-bottom:20px;">
                    <el-step title="买家下单"></el-step>
                    <el-step title="商家接单"></el-step>
                    <el-step title="订单完成"></el-step>
                </el-steps>
                <div style="color:#969799;display:flex;align-item:center;" >
                    <div v-text="'菜品名'" style="width:33%;text-align:center;">
                    </div>
                    <div v-text="'菜品数量'" style="width:33%;text-align:center;">
                    </div>
                    <div v-text="'菜品总价'" style="width:33%;text-align:center;">
                    </div>
                    </div>
                <div v-for="iitem in item.dish" :key="iitem.dishName">
                    <div style="color:#969799;display:flex;align-item:center;" >
                        <div v-text="iitem.dishName" style="width:33%;text-align:center;">
                        </div>
                        <div v-text="'×'+iitem.value" style="width:33%;text-align:center;">
                        </div>
                        <div v-text="'￥'+(iitem.price*iitem.value).toFixed(2)" style="width:33%;text-align:center;">
                        </div>
                    </div>
                </div>
                <div style="color:#969799;font-size:20px;" class="clearfix">
                    <div>
                        总价
                    </div>
                    <div v-text="'￥'+item.totprice.toFixed(2)">
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            order:[],
            loading:true
        }
    },
    created(){
        const that=this;
        that.getOrder();
    },
    methods:{
        //get
        getOrder(){
            const that=this;
            that.loading=true;
            that.$axios({
                url:that.myConfig.manageApiUrl+'/getOrder.php',
                method:'post',
                data:{
                    shopId:that.myConfig.shopId,
                    status:2
                }
            }).then(function(res){
                that.loading=false;
                if(res.data.errCode==200){
                    that.order=res.data.order;
                }else{
                    that.$message.warning('系统繁忙，请稍后再试');
                }
            }).catch(function(err){
                that.$message.warning('系统繁忙，请稍后再试');
            })
        }
    }
}
</script>
<style scoped>
    .clearfix{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
</style>